<template>
  <view class="u-flex-y-center u-p-20 address-box u-m-20" @click="$u.route('/pages/index/integralShop/addressList')">
    <image src="@/static/images/01_22wz.png" class="address-img" mode=""></image>
    <view class="u-flex-1 u-p-r-60" v-if="orderInfo.address">
      <view class="u-flex-y-center">
        <text>{{orderInfo.address.real_name}}</text>
        <text class="u-m-l-20">{{orderInfo.address.phone}}</text>
      </view>
      <view class="address-text" v-if="type == 1">
        {{orderInfo.address.province}} {{orderInfo.address.city}} {{orderInfo.address.district}}
        {{orderInfo.address.detail}}
      </view>
      <view class="address-text" v-if="type == 2">
        {{orderInfo.address.user_address}}
      </view>
    </view>
    <view v-else>添加地址</view>
    <image src="@/static/images/01_1wd.png" class="address-more" mode=""></image>
  </view>
  <view>
    <shop-row-item :item="orderInfo.product">
      <template #bottom>
        <view class="total-num u-flex-end u-flex-y-center u-m-t-20 u-p-t-20 ">
          <view>共计{{orderInfo.number}}件商品</view>
          <view class="u-m-l-56">
            <text>合计：</text>
            <text>{{orderInfo.pay_gold}}积分</text>
          </view>
        </view>
      </template>
    </shop-row-item>
  </view>
  <view class="order-info" v-if="type != 1">
    <view class="order-title">订单信息</view>
    <view>订单编号：{{orderInfo.order_sn}}</view>
    <view>下单时间：{{orderInfo.create_time}}</view>
  </view>
  <view class="action-bar u-flex-y-center u-flex-between" v-if="type == 1">
    <view class="">
      <text>合计：</text>
      <text>{{orderInfo.pay_gold}}积分</text>
    </view>
    <up-button type="warning" shape="circle" :customStyle="{width:'212rpx',height:'72rpx',margin:0}" color="#F87610"
      @click="_orderCreate">立即兑换</up-button>
  </view>
</template>

<script setup>
  import { onBeforeUnmount, onMounted, onUnmounted, ref } from 'vue';
  import shopRowItem from '../components/shop-row-item.vue';
  import { orderConfirm, orderCreate, orderStoreDetail } from '../../../config/api';
  const props = defineProps({
    type: {
      type: [String, Number],
      default: 1
    },
    id: {
      type: [String, Number],
      default: ''
    }
  })
  if (props.type != 1) {
    uni.setNavigationBarTitle({
      title: '兑换详情'
    })
  }
  const orderInfo = ref({
    product: {},
    address: {}
  })
  uni.$on('changeAddress', data => {
    console.log(data)
    orderInfo.value.address = {
      ...data
    }
  })
  onBeforeUnmount(() => {
    uni.$off('changeAddress')
  })
  onMounted(() => {
    if (props.type == 1) {
      _orderConfirm()
    } else {
      _orderDetail()
    }
  })
  // 兑换详情
  const _orderDetail = () => {
    orderStoreDetail({ id: props.id }).then(res => {
      orderInfo.value = {
        address: {
          user_address: res.data.user_address,
          phone: res.data.user_phone,
          real_name: res.data.real_name
        },
        product: res.data.product_info,
        ...res.data,
      }
    })
  }
  // 确认兑换
  const _orderCreate = () => {
    orderCreate({ product_id: props.id, address_id: orderInfo.value.address.id, number: 1 }).then(res => {
      console.log(res)
      uni.$u.toast(res.msg)
      setTimeout(() => {
        uni.navigateBack()
      }, 500)
    })
  }
  // 确认订单
  const _orderConfirm = () => {
    orderConfirm({ product_id: props.id }).then(res => {
      orderInfo.value = res.data
    })
  }
</script>

<style lang="scss" scoped>
  .address-box {
    background: #fff;
    border-radius: 20rpx;
    position: relative;

    text {
      font-size: 30rpx;
      font-weight: 800;
      color: #000;
    }

    text+text {
      font-size: 28rpx;
      font-weight: 500;
    }

    .address-text {
      margin-top: 12rpx;
      font-size: 26rpx;
      color: #666;
    }

    .address-img {
      width: 80rpx;
      height: 80rpx;
      margin-right: 20rpx;
    }

    .address-more {
      width: 14rpx;
      height: 20rpx;
      position: absolute;
      top: 0;
      right: 20rpx;
      bottom: 0;
      margin: auto;
    }

  }

  .total-num {
    font-size: 26rpx;
    font-weight: 500;
    color: #303030;
    border-top: 1px solid #eee;

    text+text {
      color: #E61818;
      font-size: 32rpx;
    }
  }

  .action-bar {
    padding: 20rpx;
    padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 16rpx solid #f8f8f8;
    z-index: 9;

    text {
      font-size: 28rpx;
      color: #303030;
      font-weight: 500;
    }

    text+text {
      font-size: 36rpx;
      color: #E61818;
    }
  }

  .order-info {
    background: #fff;
    border-radius: 20rpx;
    font-size: 26rpx;
    color: #000;
    padding: 20rpx;
    margin: 0 20rpx;

    .order-title {
      font-size: 28rpx;
      font-weight: 800;
      margin-bottom: 16rpx;
    }
  }
</style>